<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Transition Scroll Website Demo</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    .page {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    .page.no-active {
      opacity: 0;
      transform: translateY(-100%);
    }

    .page.active {
      opacity: 1;
      transform: translateY(0);
    }

    .page:nth-child(odd) {
      background-color: #f0f0f0;
    }

    .page:nth-child(even) {
      background-color: #e0e0e0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="page active">Page 1</div>
    <div class="page no-active">Page 2</div>
    <div class="page no-active">Page 3</div>
    <div class="page no-active">Page 4</div>
    <div class="page no-active">Page 5</div>
  </div>

  <script>
    let currentPage = 0;
    const pages = document.querySelectorAll('.page');

    window.addEventListener('wheel', (event) => {
      if (event.deltaY > 0) {
        nextPage();
      } else {
        prevPage();
      }
    });

    function nextPage () {
      if (currentPage < pages.length - 1) {
        pages[currentPage].classList.remove('active')
        pages[currentPage].classList.add('no-active')
        currentPage++;
        pages[currentPage].classList.remove('no-active')
        pages[currentPage].classList.add('active')
      }
    }

    function prevPage () {
      if (currentPage > 0) {
        pages[currentPage].classList.remove('active')
        pages[currentPage].classList.add('no-active')
        currentPage--;
        pages[currentPage].classList.remove('no-active')
        pages[currentPage].classList.add('active')
      }
    }
  </script>
</body>

</html>